<template>
    <div>
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">修改昵称</span>
        <span slot="more"></span>
        </LoginHeader>
        <div class="edit">
            <i class="el-icon-user-solid"></i>
            <!-- <input>元气少女乔奇奇</input> -->
            <input type="text" v-model="username" @keypress.enter="edituser" @blur="edituser">
        </div>
        <p>点击可修改昵称</p>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            username:this.$store.state.username,
            // user:''
            id:''
        }
    },
     components:{
        LoginHeader
    },
    created(){
         this.$http.get('/api/users/'+this.$store.state.username).then(({
                data,config
            })=>{
                if(data.code==200){
                    // console.log(data,config);
                    this.id=data.data.id
                }else{
                    this.$messaage.error('查询失败')
                }
            })
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        edituser(){
            console.log(this.username);
            console.log(this.$store.state.username);
            this.$http.put('/api/users/'+this.$store.state.id,{username:this.username})
            .then(({
                data,config
            })=>{
                console.log(data,config);
                if(data.code==200){
                    this.$message.success('修改用户名成功')
                    this.$store.commit('getusername',this.username)
                }else{
                    this.$message.error('修改用户名失败')
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
div{
    text-align: center;

.edit{
    background-color: #f7f7f8;
    margin: 100px 0 20px;
    padding: 20px 0;
    i{
        margin-right: 15px;
        margin-left: 35%;
    }
    input{
        border: none;
        background-color: #f7f7f8;
        outline: none;
    }
}
>p{
    color: #cecece;
}
}

</style>